<template>
  <div class="app">
    <van-nav-bar
      title="加盟入驻"
      left-text=""
      left-arrow
      @click="backlink()"
    ></van-nav-bar>
    <div class="infobox1">
      <van-field
        :model-value="formdata.settle_type"
        name="入驻类型"
        label="入驻类型"
        readonly
      />
      <van-field
        v-model="formdata.company_name"
        name="企业名称"
        label="企业名称"
        placeholder="请填写企业名称"
        :rules="[{ required: true, message: '请填写企业名称' }]"
      />
      <van-field
        v-model="formdata.club_name"
        name="场馆名称"
        label="场馆名称"
        placeholder="请填写场馆名称"
        :rules="[{ required: true, message: '请填写场馆名称' }]"
      />
    </div>
    <div class="infobox1">
      <van-form @submit="onSubmit" validate-first>
        <van-field
          v-model="formdata.contact"
          name="联系人"
          label="联系人"
          placeholder="请填写联系人"
          :rules="[{ required: true, message: '请填写联系人' }]"
        />
        <van-field
          v-model="formdata.phone"
          name="联系电话"
          label="联系电话"
          placeholder="请填写联系电话"
          :rules="[
            { required: true, message: '请填写联系电话' },
            {
              pattern: /^1[3456789]\d{9}$/,
              message: '请输入正确的电话',
            },
          ]"
        />
        <van-field
          v-model="formdata.weixin"
          name="微信号"
          label="微信号"
          placeholder="请填写微信号"
          :rules="[{ required: true, message: '请填写微信号' }]"
        />
        <van-field
          v-model="formdata.code"
          center
          clearable
          label="短信验证码"
          placeholder="请输入验证码"
        >
          <template #button>
            <van-button
              v-if="codeshow"
              round
              size="small"
              type="primary"
              native-type="submit"
            >
              发送验证码
            </van-button>
            <van-button
              v-if="!codeshow"
              round
              size="small"
              type="primary"
              readonly
            >
              {{ codetime }}秒后重新获取
            </van-button>
          </template>
        </van-field>
      </van-form>
    </div>
    <div style="display: flex; justify-content: center">
      <van-button type="primary" class="comfirbtn" @click="apply"
        >申请入驻</van-button
      >
    </div>
  </div>
</template>

<script>
import { sendcode } from "@/http/request.js";
import { showToast } from "vant";
import { jiamengapply } from "@/http/request.js";
export default {
  data() {
    return {
      codeshow: true,
      codetime: 60,
      formdata: {
        company_name: "",
        club_name: "",
        contact: "",
        phone: "",
        weixin: "",
        code: "",
        settle_type: "场馆入驻",
      },
    };
  },
  methods: {
    onSubmit() {
      sendcode({ phone: this.formdata.phone }).then((res) => {
        this.codeshow = false;
        let timer = setInterval(() => {
          this.codetime--;
          if (this.codetime <= 0) {
            clearInterval(timer);
            this.codeshow = true; // 显示发送验证码按钮
            this.codetime = 60; // 重置倒计时时间
          }
        }, 1000);
      });
    },
    apply() {
      for (let key in this.formdata) {
        if (this.formdata[key].trim() === "") {
          showToast("请将信息填写完整");
        } else {
          jiamengapply(this.formdata).then((res) => {
            if (res.code == 0) {
              showToast({
                message: res.msg,
                position: "top",
              });
            } else {
              showToast({
                message: res.msg,
                position: "top",
              });
            }
          });
        }
      }
    },
    backlink() {
      this.$router.back();
    },
  },
};
</script>

<style scoped>
.app {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #f2f3f5;
}
.infobox1 {
  width: 85%;
  margin: 10px auto;
  border-radius: 15px;
}
.infobox1 .van-field:first-child {
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
}
.infobox1 .van-field:last-child {
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
}
.comfirbtn {
  width: 80%;
  height: 45px;
  margin-top: 20px;
  border-radius: 25px;
}
</style>